<template>
	<view>
		<view class="popup_mian" v-if="visible">
			<view class="centre_box">
				<image @click="onSkipH5" class="award_img" src="../../static/award_img.png"></image>
				<image @click="onClose" class="close" src="../../static/close_icon.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
			}
		},
		created() {
			// this.visible = true;
			this.getStorageValue('time')
				.then((time) => { //1.如果有时间就不用弹窗
					const today = new Date().getDate();
					const storageTime = new Date(time).getDate();
					if (today === storageTime) {
						// 2.如果日期时间相等就不用弹出
						this.visible = false;
					} else {
						// 3.如果当前日期跟本地存储日期不相等 弹窗弹窗重新记录日期时间
						this.visible = true;
					}
				}).catch(() => { //如果没有就是从来没有登录过，弹出弹窗
					this.visible = true;
				})
		},
		methods: {
			open() {
				this.visible = true;
			},
			onClose() {
				this.visible = false;
				uni.setStorage({
					key: 'time',
					data: {
						time: Date.now(), //什么时候点击关闭
					}
				})
			},
			onSkipH5() {
				this.onClose();
				uni.navigateTo({
					url: '/pages/webH5/index'
				})
			},
			getStorageValue(key, getValueKey) {
				return new Promise((resolve, reject) => {
					uni.getStorage({
						key,
						success({
							data
						}) {
							if (!data) return reject(new Error(`未找到该${key}数据`));
							if (getValueKey) resolve(data[getValueKey])
							else resolve(data[key])
						},
						fail(err) {
							reject(err)
						}
					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup_mian {
		position: fixed;
		left: 0;
		// right: 0;
		top: 0;
		// bottom: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.56);
		// display: flex;
		// justify-content: center;
		// align-items: center;

		.centre_box {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding-top: 120px;
			// height: 1200rpx;
			// width: 100%;
			.award_img {
				width: 702rpx;
				height: 640rpx;
				margin-bottom: 80rpx;
			}

			.close {
				width: 64rpx;
				height: 64rpx;
				margin: auto;
			}
		}

	}
</style>